<template>
  <div class="container">
    <!-- <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>-->
    <my-lists :title="title" :datas="GoodsList">
      <my-lists-col label="ID" width="150"></my-lists-col>
      <my-lists-col label="商品名称" width="150"></my-lists-col>
      <my-lists-col label="价格" width="150"></my-lists-col>
      <my-lists-col label="库存" width="150"></my-lists-col>
    </my-lists>
    <button @click="fun">btn</button>
    <my-lists :title="usertitle" :datas="UserList">
      <my-lists-col label="ID" width="150"></my-lists-col>
      <my-lists-col label="姓名" width="150"></my-lists-col>
      <my-lists-col label="年龄" width="150"></my-lists-col>
      <my-lists-col label="性别" width="150"></my-lists-col>
    </my-lists>
    <button @click="fun">btn</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '商品列表',
      usertitle: '用户列表',
      GoodsList: [],
      UserList: [],
    }
  },
  created() {
    this.getData()
    this.GoodsList = localStorage.getItem('goodsList')
      ? JSON.parse(localStorage.getItem('goodsList'))
      : []
  },
  methods: {
    fun() {
      this.GoodsList.push({
        id: '1',
        name: '商品1',
        price: '100',
        stock: '100',
      })
    },
    getData() {
      this.UserList = [
        {
          id: 1,
          username: '张三',
          age: 888,
          sex: 1000,
        },
        {
          id: 3,
          username: '张三1',
          age: 888,
          sex: 1000,
        },
        {
          id: 2,
          username: '张三2',
          age: 888,
          sex: 1000,
        },
      ]
      //   this.GoodsList = [
      //     {
      //       id: 1,
      //       name: '面膜',
      //       price: 888,
      //       stock: 1000,
      //     },
      //     {
      //       id: 2,
      //       name: '乳液',
      //       price: 666,
      //       stock: 1000,
      //     },
      //     {
      //       id: 3,
      //       name: '精华',
      //       price: 555,
      //       stock: 1000,
      //     },
      //   ]
    },
  },

  components: {},
}
</script>

<style scoped>
</style>
